<template>
  <div>
    <div class="header_container" style="width: 100%;padding-left: 1%;padding-right: 1%">
      <el-table :header-cell-style="tableHeaderColor" style="width: 100%;">
        <el-table-column label="商品信息 品名/货号/规格" min-width="250"/>
        <el-table-column label="课题组信息" min-width="250"/>
        <el-table-column label="请购人" min-width="150"/>
        <el-table-column label="价格信息" min-width="200"/>
        <el-table-column label="收货人" min-width="150"/>
      </el-table>
    </div>
    <div v-if="JSON.stringify(getList) === '{}'" class="null">暂无未到货订单。</div>
    <div class="list-container">
      <el-card v-for="(order,key) in getList" :key="key" class="box-card" shadow="hover">
        <div slot="header" class="card-header">
          <div>
            <span class="header_span" style="padding-left: 10px;">配送单号：{{ key }}</span>
            <span
              class="header_span"
              style="padding-left: 50px;"
            >配送单生成时间：{{ order.child[0]['配送单生成时间'] }}元</span>

            <span class="header_span" style="padding-left: 50px;">总价：{{ order.total }}元</span>
          </div>
          <div class="end-button">
            <el-button style="margin-right: 20px" type="text" @click="print(key)">
              打印
              <span
                v-if="parseInt(order.child[0]['打印次数'])>0"
                style="color:red"
              >已打印({{ order.child[0]['打印次数'] }})</span>
            </el-button>
            <el-button type="text" @click="deletee(key)">删除配送单</el-button>
          </div>
        </div>
        <el-table
          :show-header="false"
          :data="order.child"
          :cell-style="cellStyle"
          style="width: 100%"
        >
          <el-table-column label="商品信息 品名/货号/规格" min-width="250">
            <template slot-scope="scope">
              <span>{{ scope.row['品名'] }}/{{ scope.row['货号'] }}/{{ scope.row['包装规格'] }}</span>
            </template>
          </el-table-column>

          <el-table-column min-width="250">
            <div slot-scope="scope">
              <span>{{ scope.row['课题组名称'] }}</span>
            </div>
          </el-table-column>

          <el-table-column min-width="150">
            <div slot-scope="scope">
              <span>{{ scope.row['请购人姓名'] }}</span>
            </div>
          </el-table-column>
          <el-table-column label="价格信息(元)" min-width="200">
            <div slot-scope="scope" class="font12">
              <span>{{ scope.row['成交价'] }}*{{ scope.row['数量'] }}={{ parseFloat(scope.row['成交价'])*parseFloat(scope.row['数量']) }}</span>
            </div>
          </el-table-column>

          <el-table-column label="收货人" min-width="150">
            <div slot-scope="scope" class="font12">{{ scope.row['收货人'] }}</div>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script>
import { fetchList } from '@/api/api'
import store from '@/store'
import config from '#/api.config'

export default {
  name: 'Uncheck', data() {
    return {
      isIndeterminate: false,

      checkAll: false,
      cuxiaoList: [],
      list: []
    }
  },

  computed: {
    getList() {
      const data = store.getters.weidaohuoList
      const list = {}
      data.forEach((item) => {
        if (!list[item['配送单号']]) {
          const price = parseFloat(item['成交价'] * item['数量'])
          list[item['配送单号']] = { total: price, child: [item], selected: false }
        } else {
          const price = parseFloat(item['成交价'] * item['数量'])
          list[item['配送单号']].total = parseFloat(parseFloat(list[item['配送单号']].total) + price).toFixed(2)
          list[item['配送单号']].child.push(item)
        }
      })
      return list
    }
  },
  methods: {
    print(key) {
      console.log(key)
      const param = { query: 'vue_供货商配送单打印', username: localStorage.ghusername, 配送单号: key }
      fetchList(param).then(({ data }) => {
        if (data.message === 'file') {
          window.location.href = config.baseUrl + data.data
        }
      })
    },
    deletee(key) {
      const param = { query: 'nbjk配送单删除', username: localStorage.ghusername, 配送单号: key }
      fetchList(param).then(({ data }) => {
        if (data.flag === '0') {
          this.$message({ message: data.message, type: 'error' })
        } else {
          this.$store.dispatch('refreshWeidaohuo', localStorage.ghusername).then(() => { })
          this.$store.dispatch('refreshNew', localStorage.ghusername).then(() => { })
        }
      })
    },

    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: #F7F6Fd;color: #3a3a3a;font-weight: 500;'
      }
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      return 'border:0px'
    }

  }
}
</script>

<style>
.el-table {
  position: static;
}

.toolbar {
  padding-left: 1.1vw;
  margin-top: 5px;
  height: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.box-card {
  margin-bottom: 40px;
  box-shadow: 0 0 15px #d0d2e3;
  background: #fff;
  border: 1px solid #dcdfe6;
}

.card-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 14px;
}

.header_container {
  background: #f7f6fd;
}

.el-table__empty-block {
  display: none;
}

.header_span {
  color: #a0a0a0;
  font-size: 14px;
}

.el-card__header {
  background: #f5f5f5;
}

.card-header_span {
  color: #a0a0a0;
  font-size: 14px;
}

.img-info {
  margin-left: 1vw;
  display: flex;
  flex-direction: row;
  font-size: 12px;
}

.list-container {
  max-height: 80vh;
  overflow: scroll;
  margin-top: 5px;
}

.img-info-text {
  align-items: flex-start;
  justify-content: space-between;
  height: 40px;
  display: flex;
  flex-direction: column;
  font-size: 12px;
}

.null {
  color: #808080;
  height: 500px;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
}
</style>

